<script setup lang="ts">
type ResultType = 'err' | 'success'

const result = ref('')
const status = ref<ResultType>('err')

function success(value: string) {
  result.value = value
  status.value = 'success'
}

function err(value: string) {
  result.value = value
  status.value = 'err'
}

const bgClass = computed(() => {
  return status.value === 'err' ? 'b-red' : 'b-green'
})

defineExpose({
  success,
  err,
})
</script>

<template>
  <div v-if="result" class="mt-20px b-1px b-rd-3px b-solid p-10px" :class="bgClass">
    {{ result }}
  </div>
</template>
